<template>
	<view class="gap" v-if="show" @touchmove.stop.prevent="" @tap.stop="" :style="{backgroundColor:background}">
		<view class="gap-body">
			<view class="gap-header grace-space-between">
				<text class="gap-header-btn" :style="{color:cancelTColor}" @tap="close">{{cancelText}}</text>
				<text class="gap-header-btn" :style="{textAlign:'right', color:confirmColor}" @tap="confirm">{{confirmText}}</text>
			</view>
			<picker-view :indicator-style="indicatorStyle" class="gap-main" :value="defaultVal" @change="change">
				<picker-view-column v-if="level >= 1">
					<text class="gap-item" v-for="(item, index) in province" :key="index" data-regionId="item.region_id">{{item.region_name}}</text>
				</picker-view-column>
				<picker-view-column v-if="level >= 2">
					<text class="gap-item" v-for="(item, index) in city" :key="index">{{item.region_name}}</text>
				</picker-view-column>
				<picker-view-column v-if="level >= 3">
					<text class="gap-item" v-for="(item, index) in area" :key="index">{{item.region_name}}</text>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>
<script>
// import provinceData from '../data/city-data/province.js';
// import cityData from '../data/city-data/city.js';
// import areaData from '../data/city-data/area.js';
export default {
	name: "graceAddressPicker",
	props: {
		show : { type : Boolean, default : true },
		background:{ type : String, default : 'rgba(0, 0, 0, 0.5)' },
		cancelText : { type : String, default : '取消' },
		cancelTColor : { type : String, default : '#888888' },
		confirmText : { type : String, default : '确定' },
		confirmColor : { type : String, default : '#2BAA7A' },
		value : { type : Array , default () { return ['', '', ''] }},
		level : {type : Number, default : 3}
	},
	data() {
		return {
			indicatorStyle : 'height:35px',
			province       : [],
			city           : [],
			area           : [],
			defaultVal     : [0,0,0]
		}
	},
	watch:{
		// value:function(nv, ov){this.setDefault();},
		// defaultVal : function(nv, ov){
		// 	if(ov[0] != nv[0]){
		// 		this.defaultVal.splice(1,1,0);
		// 		this.defaultVal.splice(2,1,0);
		// 	}else if(ov[1] != nv[1]){
		// 		this.defaultVal.splice(2,1,0);
		// 	}
		// }
	},
	created() {
		this._init();
	},
	methods: {
		async _init() {
			// this.graceFullLoading = true
			let options = { "act": 'get_region', "pid": 1};
			let data = await this.$HTTP.post('/api/api.php', options);
			this.province = data;
			this.setDefault1(data);
		},
		async setDefault1(data){
			let options = { "act": 'get_region', "pid": data[0].region_id};
			let cityData = await this.$HTTP.post('/api/api.php', options);
			this.city = cityData;
			this.setDefault2(cityData);
		},
		async setDefault2(cityData){
			let options = { "act": 'get_region', "pid": cityData[0].region_id};
			let areaData = await this.$HTTP.post('/api/api.php', options);
			this.area = areaData;
		},
		arrayIndexOf : function(arr, needFind){
			// var index = 0;
			// for(let i = 0; i < arr.length; i++){if(arr[i].label == needFind){index = i; return i;}}
			// return index;
		},
		change(e) {
			let value = e.detail.value;
			for (var i = 0; i < value.length; i++) {
				if(value[i] != this.defaultVal[i]){
					// i 辨别省市区 value[i] 获取当前级下面的位置
					this.getHttp(i,value[i])
					this.defaultVal = value;
				}
			}
		},
		async getHttp(i,value){
			let arr = [],obj = null;
			if(i == 0) arr = this.province;
			if(i == 1) arr = this.city;
			if(i == 2) arr = this.area;
			obj = arr[value];
			let options = {'act':'get_region','pid':obj.region_id}
			let data = await this.$HTTP.post('/api/api.php', options);
			// 选择市区的时候还要获取区
			if(i == 0) {
				this.city = data;
				let region = {'act':'get_region','pid':data[0].region_id}
				let regionData = await this.$HTTP.post('/api/api.php', region);
				this.area = regionData;
			};
			if(i == 1) this.area = data;
		},
		confirm:function () {
			var arr = this.defaultVal;
			var res = {province : {}, city : {}, area : {}};
			for (var i = 0; i < arr.length; i++) {
				if(i === 0) res.province = this.province[arr[i]];
				if(i === 1) res.city = this.city[arr[i]];
				if(i === 2) res.area = this.area[arr[i]];
			}
			// console.log(11)
			this.$emit('confirm', res);
		},
		close : function () {
			this.$emit('close');
		}
	}
}
</script>
<style scoped>
.gap{position:fixed; width:100%; height:100%; top:0; left:0; bottom:0; z-index:998;}
.gap-body{background-color:#FFFFFF; position:absolute; z-index:999; bottom:0; left:0; width:100%;}
.gap-header{padding:25rpx;}
.gap-header-btn{width:200rpx; line-height:38rpx; height:38rpx; display:block; font-size:28rpx;}
.gap-main{width:100%; height:280px;}
.gap-item{display:block; width:100%; height:35px; font-size:12px; line-height:35px; overflow:hidden; text-align:center;}
</style>
